<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="demo_data/DragObject.js"></script>
<script src="demo_data/DropTarget.js"></script>
<script src="demo_data/dragMaster.js"></script>
<script src="demo_data/helpers.js"></script>
<style>
.uponMe { background-color: red; }
div { background-color: white; }
</style>
</head><body>

<div id="dragObjects">
	<img src="demo_data/piki.gif" id="piki">
	<img style="position: absolute; top: 49px; left: 93px; display: none;" src="demo_data/bubi.gif" id="bubi">
	<img style="" src="demo_data/trefi.gif" id="trefi">
	<img style="position: absolute; top: 132px; left: 94px; display: none;" src="demo_data/chervi.gif" id="chervi">
</div>
<div class="" style="border: 2px solid black; padding: 50px; height: 100px; width: 100px;" id="nested1">
	<div class="" style="border: 1px solid blue; height: 100px; width: 100px; text-align: center; line-height: 100px;" id="nested2">
		DROP
	</div>
</div>



<script>
onload = function() {
    var dragObjects = document.getElementById('dragObjects').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        new DragObject(dragObjects[i])
    }
    
    new DropTarget(document.getElementById('nested1'))
    new DropTarget(document.getElementById('nested2'))
    
}
</script>

    
</body></html>